<script setup>
import noteCommunal from "@/components/communal/note-communal.vue";
import {ChatboxEllipsesOutline as commentIcon, Search as searchIcon, StarOutline as starIcon} from "@vicons/ionicons5";
import {getNoteClassByUuid, selNoteClass} from "@/res/api/note_api.js";
import {inject} from "vue";
import router from "@/router/index.js";
const {toPage} = inject("toPage")

// 搜索全部的课程笔记
let classNoteRef = ref([])
getNoteClassByUuid().then(res => {
  try {
    console.log(res)
    classNoteRef.value = res.data.list
  }
  catch (e){
    $message.error(e.message);
  }
}).catch(err => {
  $message.error(err.message);
})

// 搜索课程笔记
let  noteTitleRef = ref("")
function searchNoteClass(){
  selNoteClass({
    noteTitle: noteTitleRef.value
  }).then(res => {
    try {
      console.log(res.data)
      classNoteRef.value = res.data.list
      $message.success("搜索成功")
    }
    catch (e){
      console.log(classNoteRef.value)
      $message.error(e.message);
    }
  }).catch(err => {
    $message.error(err.message);
  })
}

// 返回
function back(){
  router.back()
}
</script>

<template>
  <note-communal action-key="note-course">
<!--    <n-button type="primary" @click="back">返回</n-button>-->
    <!--    这是课程笔记-->
    <n-space justify="end">
      <n-input placeholder="课程笔记搜索" round :style="{margin:'1rem 0'}" v-model:value="noteTitleRef"  @keydown.enter="searchNoteClass">
        <template #prefix>
          <n-icon :component="searchIcon" />
        </template>
      </n-input>
    </n-space>
    <n-grid x-gap="9" y-gap="12" :cols="4">
      <n-gi v-for="(item,index) in classNoteRef" :key="index">
        <n-card   hoverable class="model-cart" @click="toPage('std/note/show',{classNoteId:item.id,uuid:item.uuid,type:'classNote'} ,false)">
          <template #cover>
            <n-space align="center" justify="center">
              <n-image :src="item.noteimg" :width="150" preview-disabled/>
            </n-space>
          </template>
          <n-space vertical>
            <span class="card-title">{{ item.notetitle }}</span>
            <n-ellipsis :line-clamp="3" line-clamp="click" :tooltip="false" :style="{fontsize:'1rem'}">
              线上课程，随时随地学，专业导师指导，互动学习资源，个性化进度，掌握新技能，提升竞争力。
            </n-ellipsis>
          </n-space>
        </n-card>
      </n-gi>
    </n-grid>
  </note-communal>
</template>

<style lang="scss" scoped>
.model-cart{
  width: 18rem;
  height: 16rem;
  &:nth-child(4n){
    position: absolute;
    right: 0;
  }
}
.card-title{
  position: relative;
  left: -1rem;
  font-size: 1rem;
  font-weight: bold;
}
</style>
